<template>
  <div class="pb50" v-loading="loading">
    <!--订单进度-->
    <!--内容-->
    <div class="product-content">
      <div class="tips tips-border">
        <div class="tips_tit pb">操作提示</div>
        <div class="tips_txt">订单总金额 = 订单支付总金额 + 商户优惠券抵扣金额 + 平台优惠券抵扣金额 + 订单积分抵扣金额 + 运费金额</div>
        <div class="tips_txt">商户结算金额 = 订单总金额 - 平台抽成金额 - 分销佣金 - 商户优惠券抵扣金额</div>
        <div class="tips_txt">商户实际结算金额 = 商户结算金额 - 商户退款金额</div>
        <div class="tips_txt">平台抽成金额 = （订单总金额 - 运费金额 - 平台优惠券抵扣金额 - 订单积分抵扣金额） * 平台抽成百分比</div>
        <div class="tips_txt">平台实际抽成金额 = 平台抽成金额 - 平台退款金额</div>
        <div class="tips_txt">分销佣金 = （订单支付总金额） * 佣金百分比</div>
        <div class="tips_txt">实际分销佣金 = （订单支付总金额 - 退款金额） * 佣金百分比</div>
      </div>
      <!--商户结算-->
      <div class="common-form">商户结算<span class="common-form-data">订单日期:{{ detail.createTime }}</span></div>
      <div class="cash-body">
        <div class="content">
          <p class="title">订单总金额(不含优惠折扣)(元)</p>
          <p class="money">{{detail.totalPrice}}</p>
        </div>
        <div class="content">
          <p class="title">运费金额(元)</p>
          <p class="money">{{detail.expressMoney}}</p>
        </div>
        <div class="content">
          <p class="title">订单支付总金额(含折扣)(元)</p>
          <p class="money">{{detail.orderMoney}}</p>
        </div>
        <div class="content">
          <p class="title">商户结算金额(元)</p>
          <p class="money">{{detail.supplierMoney}}</p>
        </div>
        <div class="content">
          <p class="title">商户退款金额(元)</p>
          <p class="money">{{detail.refundSupplierMoney}}</p>
        </div>
        <div class="content">
          <p class="title">商户实际结算金额(元)</p>
          <p class="money">{{detail.realSupplierMoney}}</p>
        </div>
        <div class="content">
          <p class="title">平台抽成金额(元)</p>
          <p class="money">{{detail.sysMoney}}</p>
        </div>
        <div class="content">
          <p class="title">平台退款金额(元)</p>
          <p class="money">{{detail.refundSysMoney}}</p>
        </div>
        <div class="content">
          <p class="title">平台实际抽成金额(元)</p>
          <p class="money">{{detail.realSysMoney}}</p>
        </div>
        <div class="content">
          <p class="title">分销佣金(元)</p>
          <p class="money">{{detail.agentMoney}}</p>
        </div>
        <div class="content">
          <p class="title">实际分销佣金(元)</p>
          <p class="money">{{detail.realAgentMoney}}</p>
        </div>
        <div class="content">
          <p class="title">退款金额(元)</p>
          <p class="money">{{detail.refundMoney}}</p>
        </div>
        <div class="content">
          <p class="title">商户优惠券抵扣金额(元)</p>
          <p class="money">{{detail.couponMoney}}</p>
        </div>
        <div class="content">
          <p class="title">平台优惠券抵扣金额(元)</p>
          <p class="money">{{detail.couponMoneySys}}</p>
        </div>
        <div class="content">
          <p class="title">订单积分抵扣金额(元)</p>
          <p class="money">{{detail.pointsMoney}}</p>
        </div>
      </div>
      <!--商品信息-->
      <div class="common-form mt16">商品信息</div>
     <div class="table-wrap">
        <el-table size="small" :data="order.productList" border style="width: 100%">
          <el-table-column prop="productName" label="商品" width="400">
            <template #default="scope">
              <div class="product-info">
                <div class="pic"><img v-img-url="scope.row.imagePath" /></div>
                <div class="info">
                  <div class="name">{{ scope.row.productName }}</div>
                  <div class="gray9" v-if="scope.row.productAttr!=''">{{scope.row.productAttr}}</div>
                  <div class="orange" v-if="scope.row.refund">{{ scope.row.refundTypeText }}-{{ scope.row.refundStatusText }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="productNo" label="商品编码"></el-table-column>
          <el-table-column prop="productWeight" label="重量 (Kg)"></el-table-column>
          <el-table-column prop="totalNum" label="购买数量">
            <template #default="scope">
              <p>x {{ scope.row.totalNum }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="totalPayPrice" label="支付金额(不含运费)(元)">
            <template #default="scope">
              <p>￥ {{ scope.row.totalPayPrice }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="totalPayPrice" label="运费金额(元)">
            <template #default="scope">
              <p>￥ {{ detail.expressMoney }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="total_pay_price" label="退款金额(元)">
            <template #default="scope">
              <p >{{detail.refundMoney}}</p>
            </template>
          </el-table-column>
          <!--<el-table-column prop="first_money" label="一级分销佣金(元)">
            <template #default="scope">
              <p>￥ {{ scope.row.first_money }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="second_money" label="二级分销佣金(元)">
            <template #default="scope">
              <p>￥ {{ scope.row.second_money }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="third_money" label="三级分销佣金(元)">
            <template #default="scope">
              <p>￥ {{ scope.row.third_money }}</p>
            </template>
          </el-table-column>-->
        </el-table>
      </div>

    </div>
    <div class="common-button-wrapper">
      <el-button size="small" type="info" @click="cancelFunc">返回上一页</el-button>
    </div>
  </div>
</template>

<script>
  import SupplierApi from '@/api/cash.js';
  import {
    deepClone
  } from '@/utils/base.js';
  export default {
    data() {
      return {
        active: 0,
        /*是否加载完成*/
        loading: true,
        /*订单数据*/
        detail: {
        },
        order: {},
        /*一页多少条*/
        pageSize: 20,
        /*一共多少条数据*/
        totalDataNumber: 0,
        /*当前是第几页*/
        curPage: 1,
      };
    },
    created() {
      /*获取列表*/
      this.getParams();
    },
    methods: {
      /*获取参数*/
      getParams() {
        let self = this;
        // 取到路由带过来的参数
        const params = this.$route.query.settledId;
        SupplierApi.detail({
              settledId: params
            },
            true
          )
          .then(res => {
            self.loading = false;
            self.detail = res.data;
            self.order = res.data.orderMaster;
          })
          .catch(error => {
            self.loading = false;
          });
      },

      /*取消*/
      cancelFunc() {
        this.$router.back(-1);
      }

    }
  };
</script>
<style>
  .table-wrap{
    padding: 20px;
    padding-top: 0;
  }
  .common-form-data{
    margin-left: 15px;
    font-weight: 500;
  }
  .tips-border{
    border: 1px solid #CACACA;
    padding: 15px;
    margin-bottom: 20px;
  }
  .tips_tit{
    font-size: 22px;
    margin-bottom: 10px;
  }
  .tips_txt{
    line-height: 25px;
    color: #666;
    font-size: 14px;
  }

  .tips-border{
    border: 1px solid #CACACA;
    padding: 15px;
    margin-bottom: 20px;
  }
  .tips_tit{
    font-size: 22px;
    margin-bottom: 10px;
  }
  .tips_txt{
    line-height: 25px;
    color: #666;
    font-size: 14px;
  }

  .cash_t_brief .cash-header {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .cash_t_brief .cash_t_title {
    position: relative;
    padding-left: 10px;
  }

  .cash_t_brief .cash_t_title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 14px;
    background-color: #3a8ee6;
    position: absolute;
    left: 0;
    top: 50%;
    border-radius: 5px;
    transform: translateY(-50%);
  }

  .cash_t_common .cash-body {
    padding: 20px;
  }

  .cash-body {
    display: flex;
    justify-content: flex-start;
    padding-bottom: 0 !important;
    padding-right: 50px !important;
    padding-left: 50px !important;
    flex-wrap: wrap;
    position: relative;
    padding: 10px 15px;
    line-height: 24px;
  }

  .content {
    width: 33.3%;
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    justify-content: center;
  }

  .content {
    width: 33.3%;
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    justify-content: center;
  }

  .money {
    font-size: 20px;
    color: #666;
    font-weight: bold;
    margin-top: 10px;
    max-width: 250px;
  }
</style>
